<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.min.js"></script>
    <style>
        .router-link-active{
            color:#f60;
        }
    </style>
</head>
<body>
<div id="demo">
    <div>
        <router-link to="/home">主页</router-link>
        <router-link to="/new">新闻</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
   var Home={
       template:'<h>我是主页</h>'
   };
   var News={
       template:'<h>我是新闻页</h>'
   };
   const routes=[
       {path:'/home',component:Home},
       {path:'/new',component:News},
       {path:'*',redirect:'/home'}
   ];

   const router=new VueRouter({
       routes
   });
   new Vue({
       router,
       el:'#demo'
   });
</script>
</body>
</html>